<script setup lang="ts">
import { getFormatDictMap } from '@/util/dict'
import { Delete, Edit, Plus, icon } from '@/util/icons'
import { nextTick, onMounted, ref } from 'vue'
import type { MenuTable, MenuHandleTable } from '@/types/menu'
import { getSysMenuHandles, updateSysMenuHandles } from '@/api/menu'
import { ElMessage, type InputInstance } from 'element-plus'
import IconSelecter from '@/components/IconSelecter.vue'
import { getHandleKeys } from '@/util/menu'

const props = defineProps<{
  editData: MenuTable
}>()
// 注册关闭事件
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()
const loading = ref(true)
const tableDict = ref<Map<string, string>>(new Map<string, string>())
// 获取字典键值对数据
const tableData = ref<MenuHandleTable[]>([])
function getData() {
  loading.value = true
  tableData.value = []
  getSysMenuHandles(props.editData.mId!)
    .then((d) => {
      tableData.value = d.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 200)
    })
    .catch(() => {
      ElMessage.error('数据获取出错了')
    })
}
onMounted(() => {
  getFormatDictMap('sys_menu_handle', 'head').then((d) => {
    tableDict.value = d
  })
  getData()
})

//编辑键值
const editIndex = ref(-1)
const tagInputRef = ref<InputInstance>()
// 修改权限标识
function editTag(index: number) {
  editIndex.value = index
  nextTick(() => {
    tagInputRef.value?.focus()
  })
}
const nameInputRef = ref<InputInstance>()
// 修改名字
function editName(index: number) {
  editIndex.value = index
  nextTick(() => {
    nameInputRef.value?.focus()
  })
}
// 图标修改
// 图标选择
const dialogVisible = ref(false)
function openDialog(index: number) {
  editIndex.value = index
  dialogVisible.value = true
}
function closeDialog() {
  dialogVisible.value = false
}
function selectIcon(name: string) {
  closeDialog()
  tableData.value[editIndex.value].icon = name
}
//删除
function del(index: number) {
  tableData.value.splice(index, 1)
}
//添加
function add() {
  editIndex.value = tableData.value.length
  tableData.value.push({
    hId: 1,
    icon: 'Aim',
    iconType: 'sys',
    mId: props.editData.mId,
    name: '',
    show: '1',
    status: '1',
    style: 'plain',
    tag: '',
    type: 'success'
  })
}
//保存修改
function save() {
  updateSysMenuHandles(props.editData.mId!, tableData.value)
    .then((d) => {
      ElMessage.success(d.msg)
      emit('cDlg')
    })
    .catch((d) => {
      ElMessage.error(d.msg)
    })
    .finally(() => {
      editIndex.value = -1
    })
}

function cancel() {
  editIndex.value = -1
  emit('cDlg')
}

function tagSelect(inp: string, cb: (r: Array<any>) => void) {
  const keys = getHandleKeys()
  let r: Array<any> = []
  keys.forEach((d) => {
    if (d.includes(inp)) {
      r.push({ value: d })
    }
  })
  cb(r)
}
</script>
<template>
  <div class="view-box edit-dict-kv">
    <div class="edit-l"><el-button :icon="Plus" @click="add" circle /></div>
    <div class="edit-r">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column width="200" label="按钮效果" align="center">
          <template #="{ row }">
            <el-button
              :icon="(icon as any)[row.icon]"
              :type="row.type"
              v-if="row.show == '1'"
              :disabled="row.status == '0'"
              :circle="row.style == 'circle'"
              :plain="row.style == 'plain'"
              :round="row.style == 'round'"
              >{{ row.name }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('name') || 'name'" prop="name">
          <template #default="{ row, $index }">
            <el-input
              clearable
              ref="nameInputRef"
              v-if="$index == editIndex"
              v-model="row.name"
            ></el-input>
            <span class="edit-text" v-else @click="editName($index)">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          align="center"
          :label="tableDict.get('tag') || 'tag'"
          prop="tag"
        >
          <template #default="{ row, $index }">
            <el-autocomplete
              v-if="$index == editIndex"
              style="width: 100%"
              v-model="row.tag"
              :fetch-suggestions="tagSelect"
            >
            </el-autocomplete>
            <span class="edit-text" v-else @click="editTag($index)">{{ row.tag }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          align="center"
          :label="tableDict.get('icon') || 'icon'"
          prop="icon"
        >
          <template #default="{ row, $index }">
            <el-icon class="highlight-info" @click="openDialog($index)">
              <component :is="(icon as any)[row.icon]"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('status') || 'status'">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('iconType') || 'iconType'">
          <template #default="{ row }">
            <el-switch
              v-model="row.iconType"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-value="sys"
              inactive-value="none"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('type') || 'type'">
          <template #default="{ row }">
            <el-select v-model="row.type">
              <el-option value="danger" label="danger" />
              <el-option value="primary" label="primary" />
              <el-option value="success" label="success" />
              <el-option value="info" label="info" />
              <el-option value="warning" label="warning" />
              <el-option value="default" label="default" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('style') || 'style'">
          <template #default="{ row }">
            <el-select v-model="row.style">
              <el-option value="plain" label="plain" />
              <el-option value="round" label="round" />
              <el-option value="circle" label="circle" />
              <el-option value="default" label="default" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('show') || 'show'">
          <template #default="{ row }">
            <el-switch
              v-model="row.show"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200px" label="操作">
          <template #default="{ $index }">
            <el-button type="success" :icon="Edit" @click="editIndex = $index">编辑</el-button>
            <el-button type="warning" :icon="Delete" @click="del($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="buttons">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="save">保存</el-button>
  </div>
  <el-dialog v-model="dialogVisible">
    <IconSelecter @select-icon="selectIcon" />
  </el-dialog>
</template>

<style scoped lang="less">
.edit-dict-kv {
  display: flex;

  .edit-l {
    width: 60px;
  }

  .edit-r {
    width: 100%;
  }

  .edit-text {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
